Version textuelle

Présentation

Dans les versions précédentes du Quiz des présidents, nous avons enregistré les données -- i.e. les questions, les réponses et les images -- dans l'application elle-même. < Un inconvénient de ce choix de conception est que si nous décidons de changer des données dans le Quiz,nous devrons modifier l'application elle-même, donc la reconstruire et la rediffuser à tous les utilisateurs. Dans cette leçon nous abordons la notion des données persistantes et partagées sur le Web (dans le cloud). Nous allons apprendre - avec une nouvelle version du Quiz des présidents - à enregistrer sur le Web, les questions, les réponses et les liens aux images en utilisant l'outil Firebase de Google. Objectifs: Dans cette leçon nous allons apprendre à créer une application qui propose un quiz dont le contenu est dans une base de données sur le Web; comprendre la notion de partage de données sur le Web; saisir la différence entre opérations synchrones et asynchrones; accéder à une base de données Firebase et l'utiliser.

Introduction : Abstraction des données d'une application

Dans le monde connecté d'aujourd'hui, les utilisateurs d'appareils mobiles ont accès par internet à des données stockées en dehors de leur appareil. Notre nouvelle version du quiz des présidents va utiliser des données enregistrées dans le Cloud.

Quand vous aurez terminé votre code, vous aurez une application qui stocke ses données en dehors de de votre appareil et de votre application. Ca permettra à vos collègues - qui ne sont pas des programmeurs - de modifier les données et de créer de nouveaux quiz sans avoir à changer une seule ligne de code, sans avoir à reconstruire l'application quiz, et sans avoir à la rediffuser aus utilisateurs !

Abstraction

Cette approche est un nouvel exemple de la notion d'abstraction: ici il s'agit d'abstraction des données. Plutôt que d'intégrer les données dans notre algorithme, nous les séparons complètement. Les algorithmes vont donc "voir" les données du Quiz de façon abstraite, en connaissant leur forme mais pas leur contenu.

Tant que le Quiz respecte le format des listes parallèles d'images, de questions et de bonnes réponses, l'application pourra traiter de n'importe quel sujet : histoire, mathématiques, anglais,etc. De même pour ajouter des questions au quiz des présidents, il suffira de les ajouter dans la base de données. De cette manière, notre application est devenue beaucoup plus générale -- i.e. elle peut traiter de tous les sujets à partir de données préparées sur le Web.

Concept de base de données : Firebase vs. TinyDb vs. TinyWebDb

Avant de travailler sur l'application elle-même, il est nécessaire de comprendre ce qu'est "Firebase", comment il fonctionne et en quoi il diffère de TinyDb. Comme nous l'avons vu dans une leçon précédente, nous pouvons utiliser un composant TinyDb pour gérer des donénes persistantes persist. TinyDb enregsitre les données sur l'appareil mobile lui-même (tablette ou smartphone). L'accès aux donnes se fait de façon synchrone, ce qui veut dire que l'accès est immédiat, au sens où l'application n'a pas besoin d'attendre l'extraction des données (elles son lues très rapidement).

Firebase est un service de bases de données sur le Web. Une base de données Firebase enregsitre ses données sur Internet et, en conséquence, accède aux données de façon asynchrone , ce qui veut dire que les données n'arrivent pas immédiatement.
NOTE : On va donc être conduit à considérer que le retour des données est un évènement en soi, séparé de la demande (asynchrone). Ce n'était pas le cas dans la demande de données locales (avec TinyDb) où la réponse est rendue sans attendre, comme c'est le cas dans les procédures.

Le tutoriel vidéo suivant explqiue les notions de base mises en oeuvre dans l'utilisation de Firebase.

Etape 1: Intégrer Firebase à votre Application

Pour commencer, ouvre dans un onglet séparé ouvrez App Inventor avec le modèle du Quiz des Presidents pour Firebase et suivez le tutoriel.

La première étape pour utiliser Firebase dans une application est de mettre en place et de configurer la base de données Firebasethat qui sera utilisée par l'application. La vidéo qui suit montre comment faire. Pour cette partie du tutoriel vous suivez ce lien vers Google Firebase et cliquez sur "Get Started for Free".

Etape 2: Créer une base de données en ligne

La vidéo qui suit montre comment créer une nouvelle base de données pour notre application, et comment ajouter, détruire et configurer les données pour que l'interface avec App Inventor fonctionne correctement. Vous vous rappelez certainement que le Quiz des présidents utilise trois listes parallèles de données, une pour les questions, une pour les réponses, et une pour les images. Pour correspondre à ces listes, nous allons mettre en place trois listes parallèles dans la base de données Firebase, comme le propose la vidéo qui suit.

Etape 3: Exploitation des données dans l'application

Maintenant que la base de donénes externe est en place, nous devons écrire -- dans l'application --le code qui va lire et traiter les données du Quiz. La vidéo suivante montre comment le faire.

Amélioration: Stockez les images en ligne

Dans sa forme actuelle l'application enregistre les questions et les réponses du quiz dans la base de données en ligne. Mais les images affichées dans le quiz restent stockées sur l'appareil. Elles ne seront affichées que si l'utilisateur des a téléchargées et rangées au bn endroit.
Peut-on rémedier à ça ? Si oui, alors toutes les donénes de l'application seront prises en charge en dehors de l'application : Les données auront complètement été abstraites et séparées de l'algorithme de l'application.

Malheureusement, App Inventor n'est pas configuré pour autoriser le stockage des images sur Firebase. Toutefois, il est possible de stocker les images sur une base de données TinyPic et de stocker l'adresse Web des images dans la base de données Firebase. Dans cette approche, plutôt que d'utiliser la mémoire flash du smartphone ou de la tablette, l'application va charger les photos depuis Internet via leur adresse web : leur URL ou Uniform Resource Locator).

NOTE: Une limite de cette approche est que TinyPic détruit les images qui ne sont pas utilisées pendant 30 jours. Donc, ce n'est pas une solution à lon terme. La seule solution à long terme pour stocker vos photos en ligne est de mettre en place votre propre serveur ou d'utiliser un service payant pour le faire.

Debugger votre application Firebase

Quand on fait appel à un service Internet comme Firebase, il est extérieur à l'application, et un certain nombre de choses sont sucpeptibles de mal se passer. La vidéo suivante vous indqiue comment debugger une partie des difficultés possibles. NOTE : faites nous savoir si vous en rencontrez d'autre, nous essaierons de les prendre en compte.

Exercices

Pour bien apprécier l'amélioration du niveau de généralité et de souplesse d'utilisation de cette version du Quiz des présidents, voici quelques exerices simples à essayer :

• Remplacez un des présidents du quiz par un autre président de votre choix. Assurez-vous de modifier la bonne donnée dans chacune des listes parallèles. Est-ce que cette opération a nécessité de modifier l'application ?
• Ajoutez une ou plusieurs questions au quiz. Pour le faire, vous devez ajouter de nouvelles données dans chacune des trois listes : celle des questions, cele des réponses et celle des images. Est-ce que cette opération a nécessité de modifier l'application ?
• Modifiez l'application pour en faire un quiz sur le sport ou sur la musique. Pour cet exercice, vous souhaiterez peut-être créer une copie de l'application pour adapter l'interface utilisateur (UI) au type de conteny. Vous pouvez aussi créer une copie de votre base de données Firebase ?
  NOTE : mais vous pouvez aussi mettre à jour la base de données existante pour qu'elle intègre les données de votre nouveau sujet. auquel cas vous n'aurez pas à toucher l'application AppInventor elle même.

Auto-contrôle